{extend name="default/template/base_index" /}

{block name="area_header"}
<link rel="stylesheet" type="text/css" media="all" href="__CSS__/wxshop.css">
<style>
  .input-sort { max-width:65px; }
  input.form-control{ display: inline-block; }
 .select2{ width:200px !important;z-index: 99; }
.select2-hidden-accessible{ width:1px !important; }
.select2-selection{ border-color:#ddd !important;height:35.56px !important; }
.select2-selection .select2-selection__rendered{ line-height: 35.56px !important;height:35.56px !important; }
.select2-dropdown{ border-color: #ddd !important; }
.modal-dialog{ width: 80%;margin-left: 10%; }
</style>
<link type="text/css" rel="stylesheet" href="__CDN__/select2/4.0.0/css/select2.min.css" />
<link type="text/css" rel="stylesheet" href="__CDN__/select2/4.0.0/css/select2.min.css" />
<script type="text/javascript" src="__CDN__/select2/4.0.0/js/select2.full.js"></script>
<script type="text/javascript" src="__CDN__/select2/4.0.0/js/i18n/zh-CN.js"></script>
{/block}

{block name="area_body"}
{include file="default/Widget/topbar" /}
<div class="admin-main container-fluid">
  {include file="default/Widget/left" /}
  <div class="admin-main-content">
  {include file="default/Widget/breadcrumb" /}
    <div class="table-responsive well">
      <h2>题库管理</h2>
      <label class="text-info">除完形填空外,无需设置小题;点击id查看小题<br />
      小题会有排序要求,越大越靠前
      </label>
       <!-- 过滤\查询按钮 -->
      <div class="filter-controls">
        <form action="{:url('question/index',['parent'=>$parent])}" class="memberForm form-inline" method="post">
          <div class="form-group">
            <label class="control-label">标识</label>
            <div class="input-group">
              <input class="form-control" type="text" name="kword" placeholder="标识" value="{$kword|default=''}"/>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label"></label>
            <div class="input-group" style="width:150px">
              <select class="form-control" name="status" id='js-status'/>
               <option value="-2">== 状态 ==</option>
               <option value="0">起草</option>
               <option value="1">发布</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label"></label>
            <div class="input-group" style="width:150px">
              <select class="form-control" name="all" id='js-all'/>
               <option value="0">自己</option>
               <option value="1">全部</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label"></label>
            <div class="input-group" style="width:200px">
              <select class="form-control" name="dt_type" id="js-dt-type"/>
              <option value="0">== 类型 ==</option>
              {volist name="dt_types" id="v"}
              <option value="{$v.id}">{$v.name}</option>
              {/volist}
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label">&nbsp;</label>
            <div class="input-group">
              <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i>查询</button>
            </div>
          </div>
        </form>
      </div>
      <form  class="hide-data form-horizontal">
      <!-- 操作按钮 -->
      <div class="btn-controls">
        <a class="btn btn-sm btn-primary" href="{:url('question/set',['parent'=>$parent])}"><i class="fa fa-plus"></i>{:L('BTN_ADD')}</a>
        <a class="btn btn-sm btn-primary ajax-post" href="{:url('question/dels')}" target-form="selectitem"><i class="fa fa-plus"></i>删除选中</a>
        {neq name="parent" value="0"}<a href="{:url('question/sort')}" class="btn btn-danger btn-sm ajax-post" hide-data='true'><i class="fa fa-trash-o"></i>排序选中</a>
        {else /}
        <a class="btn btn-sm btn-primary" id="js-add-unit" data-toggle="modal" data-target="#addModal">添加到单元</a>
        {/neq}
      </div>
      <table class="table table-striped table table-hover  table-condensed">
          <thead>
          <tr>
            <th><input type="checkbox" class="selectall" onclick="myUtils.selectall(this,'.selectitem');"/>ID</th>
            <th>标识(方便识别)</th>
            <th>类型</th>
            <th>状态</th>
            <th>管理</th>
            <th>音频间歇</th>
            <th>答案/小题 统计</th>
            {neq name="parent" value="0"}
            <th>排序</th>{/neq}
            <th>添加时间</th>
            <th>{:L('OPERATOR')}</th>
          </tr>
          </thead>
          <tbody>
            {empty name="list"}
            <tr>
              <td colspan="7" class="text-center">{:L('NO_DATA')}</td>
            </tr>
            {else/}
            {volist name="list"  id="vo"}
            <tr>
              <td data-id="{$vo['id']}">
                <input type="checkbox" value="{$vo.id}" name="ids[]" class="selectitem"/>
                {neq name="vo.has_child" value="1"}{$vo['id']}{else /}<a href="{:url('question/index',['parent'=>$vo['id']])}">{$vo['id']}</a>{/neq}</td>
              <td>
                {$vo['note']|default=''}</td>
              <td>
                {:$dt_types[$vo['dt_type']]['name']}</td>
              <td>
                {if condition="$vo['status'] eq 0"}起草 <a href="{:url('admin/question/status',['id'=>$vo['id'],'status'=>1])}" class="ajax-get btn btn-sm btn-success">发布</a>
                {elseif condition="$vo['status'] eq 1" /}发布 <a href="{:url('admin/question/status',['id'=>$vo['id'],'status'=>0])}" class="ajax-get btn btn-sm btn-info">起草</a>
                {else /}未知{/if}</td>
              <td>
                <a class="btn btn-sm btn-primary" href="{:url('admin/question/detail',['id'=>$vo['id']])}">题面/答案/录音</a>
                {eq name="vo.has_child" value="1"}<a class="btn btn-sm btn-primary" href="{:url('admin/question/index',['parent'=>$vo['id']])}">小题管理<a/>{/eq}</td>
              <td>
                {eq name="vo.relax" value="0"}无{else/}{$vo.relax}秒{/eq}
              </td>
              <td>
                {eq name="vo.has_child" value="1"}
                  小题 :
                  {eq name="vo.child_number" value="0"}
                    <label for="" class="text-info">未设置</label>
                  {else /}
                  总({$vo.child_number})/发布({$vo.child_number_public})
                  {/eq}
                {else /}
                  答案 :
                  {eq name="vo.answer_number" value="0"}
                    <label for="" class="text-info">未设置</label>
                  {else /}
                  总({$vo.answer_number})/正确({$vo.answer_number_real})
                  {/eq}
                {/eq}</td>
              {neq name="vo.parent_id" value="0"}
              <td>
                <input type="number" name="sort_{$vo.id}" class="form-control input-sm input-sort" value="{$vo.sort}"></td>
              {/neq}
              <td>{:date('Y-m-d H:i',$vo['create_time'])}</td>
              <td>
                <a class="btn btn-sm btn-default" href="{:url('Question/set',['id'=>$vo['id']])}"><i class="fa fa-edit"  data-loading-text="{:L('BTN_EDIT')}..." ></i>{:L('BTN_EDIT')}</a>
                <a href="{:url('Question/status',['id'=>$vo['id'],'status'=>-1])}" class="btn btn-danger btn-sm ajax-get confirm"><i class="fa fa-trash-o"></i> {:L('BTN_DELETE')} </a>
              </td>
            </tr>
            {/volist}
            {/empty}
          </tbody>
      </table>
      </form>
      <div>{$show}</div>
    </div>
    <!-- model start -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
      <div class="modal-dialog" style="z-index: 12345678;">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">添加到单元（也可在书籍的单元管理里添加）</h4>
          </div>
          <div class="modal-body">
            <form class="addForm" id="addForm">
              <input type="hidden" id="" name="unit_id" />
              <input type="hidden" id="" name="q_ids" />
              <div class="category clearfix">
                  <div class="category-txt">当前选择：
                      <span class="js_catetxt1 js_catetxt" style=""></span>
                      <span class="js_catetxt2 js_catetxt"></span>
                      <span class="js_catetxt3 js_catetxt"></span>
                      <span class="js_catetxt4 js_catetxt"></span>
                      <span class="desc"></span>
                  </div>

                  <div class="category-item col-lg-3 col-md-3 js_catelist0 js_catelist clearfix">
                    <div class="search-book">
                      <div class="input-group">
                        <input type="text" placeholder="请输入书名关键词" value=""
                         class=" input-sm form-control js_search">
                        <div class="input-group-addon input-group-sm"><i class="fa fa-search "></i>
                        </div>
                      </div>
                    </div>
                    <ul class="js_sec_0">
                      {volist name="books" id="v"}
                      <li>
                        <a href="javascript:;" data-book-id="{$v.book_id}" title="{$v.unit_name}" data-id="0">{$v.unit_name}</a>
                      </li>
                      {/volist}
                    </ul>
                  </div>

                  <div class="category-item col-lg-3 col-md-3 js_catelist1 js_catelist clearfix">
                    <div class="search-wrapper">
                      <div class="input-group">
                        <input type="text" placeholder="请输入单元名称" value=""
                         class=" input-sm form-control js_search">
                        <div class="input-group-addon input-group-sm"><i class="fa fa-search "></i>
                        </div>
                      </div>
                    </div>
                    <ul class="js_sec_1"></ul>
                  </div>

                  <div class="category-item col-lg-3 col-md-3 js_catelist2 js_catelist clearfix">
                    <div class="search-wrapper">
                      <div class="input-group">
                        <input type="text" placeholder="请输入单元名称" value=""
                         class=" input-sm form-control js_search">
                        <div class="input-group-addon input-group-sm"><i class="fa fa-search "></i>
                        </div>
                      </div>
                    </div>
                    <ul class="js_sec_2"></ul>
                  </div>

                  <div class="category-item col-lg-3 col-md-3 js_catelist3 js_catelist clearfix">
                    <div class="search-wrapper">
                      <div class="input-group">
                        <input type="text" placeholder="请输入单元名称" value=""
                         class="input-sm form-control js_search">
                        <div class="input-group-addon input-group-sm"><i class="fa fa-search "></i>
                        </div>
                      </div>
                    </div>
                    <ul class="js_sec_3"></ul>
                  </div>

              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i>关闭</button>
            <button type="button" url="{:url('Admin/Question/link')}" target-form="addForm" id="js_submit" class="ajax-post btn btn-primary disabled"><i class="fa fa-save"></i>确定</button>
          </div>
        </div>
      </div>
    </div>
    <!-- model end -->
  </div>
  <!-- END admin-main-content -->
</div>
<!-- END admin-main-->
{/block}

{block name="area_footer"}
<script>
$(function(){
  var all = parseInt('{$all ?? 0}');
  $('#js-all').val(all);
  // data : id unit_name book_id
  function appendTo($ul, data) {
    $ul.empty();
    var item,$item;
    for (var i = 0; i < data.length; i++) {
      item = data[i];
      $item = $("<a href='javascript:;'></a>").attr('data-id', item.id).attr('data-book-id', item.book_id).attr("title", item.unit_name).text(item.unit_name);
      $ul.append($("<li></li>").append($item));
    }
  }
  // 是否可以操作
  var flag = true;
  // a 点击事件
  // index : 第(index+1) 级单元 ,点击的a
  function cateClick(index, $ele) {
    var level = parseInt(index)+1;
    if(!flag) return;
    flag = false;

    // 当前选择 => 隐藏
    $(".category-txt span.js_catetxt").each(function (ind, item) {
      if (ind > index) $(item).addClass("hidden");
    });
    // 选择框 => 隐藏
    // $(".js_catelist").each(function (ind, item) {
    //   if (ind > index) $(item).addClass("hidden");
    // });
    // 当前选择 => 显示+内容
    if (index > 0) {
      $(".js_catetxt" + level).removeClass("hidden").html("&nbsp;&gt;&nbsp;" + $ele.text());
    } else {
      $(".js_catetxt" + level).removeClass("hidden").html($ele.text());
    };
    // 选择加 边框
    $(".js_catelist" + index + " .selected").removeClass("selected");
    $ele.parent().addClass("selected");
    //
    var book_id = $ele.data("book-id");
    var id     = $ele.data("id");
    var last   = (index == 3); //是否可以提交
    if (index < 4) { //查询1,2,3级单元
      window.ajax_post = $.post("{:url('Question/units')}", { book_id: book_id,id:id }).done(function (ret) {
        if (ret.code == 1) {
          // 清空 + 添加到 + 显示 下级
          appendTo($(".js_sec_" + level), ret.data);
          $(".js_catelist" + level).removeClass("hidden");
          if(last){
            $('input[name=unit_id]').val(id);
            $("#js_submit").removeClass("disabled");
          }else{
            $('input[name=unit_id]').val('');
            $("#js_submit").addClass("disabled");
          }
        } else {
          myalert(data.info,false);
        }
        flag = true;
      });
    }else{
      myalert('未知操作',false);
      flag = true;
    }
  }

  function filter(target, ele) {
      var text = target.val().trim().toLowerCase();
      // text = text.trim().toLowerCase();
      $("a", ele).each(function (index, ele) {
        // console.log(text,$(ele).text())
        if (text && $(ele).text().toLowerCase().indexOf(text) == -1) {
            $(ele).parent().addClass("hidden");
        } else {
            $(ele).parent().removeClass("hidden");
        }
      });
      console.log(window.timeoutInterval);
      window.timeoutInterval = 0;
  }

  function myalert(){
    var msg  = ('undefined' == typeof arguments[0]) ? 'success' : arguments[0];
    var type = ('undefined' == typeof arguments[1]) ? true : arguments[1];
    $.scojs_message(msg, type ? $.scojs_message.TYPE_OK : $.scojs_message.TYPE_ERROR);
  }
  $(".search-wrapper input").keydown(function (ev) {
      $ele = $(ev.target).parents(".category-item").find("ul");
      window.searchUnitClock = setTimeout(function () {
          filter($(ev.target), $ele);
      }, 300);
  });
  //
  $(".search-book input").keydown(function (ev) {
      $this = $(this);
      window.seachBookClock = setTimeout(function () {
        // ajax - books
        var kword = $this.val();
        $.post("{:url('Question/books')}", { kword: kword }).done(function (ret) {
          if (ret.code == 1) {
            // 清空 + 添加到 + 显示 下级
            appendTo($(".js_sec_0"), ret.data);
            // $(".js_catelist0").removeClass("hidden");
            $('input[name=unit_id]').val('');
            $("#js_submit").addClass("disabled");
          } else {
            myalert(data.info,false);
          }
        });
      }, 300);
  });
  $(".js_catelist0").on('click','a',function (ev) {
      cateClick(0, $(ev.target));
  });
  $(".js_sec_1").on('click','a',function (ev) {
      cateClick(1, $(ev.target));
  });
  $(".js_sec_2").on('click','a',function (ev) {
      cateClick(2, $(ev.target));
  });
  $(".js_sec_3").on('click','a',function (ev) {
      cateClick(3, $(ev.target));
  });
  // 展开模态框 判断是否选中 和设置q_ids
  $('#addModal').on('show.bs.modal', function (e) {
    var $ids = $('input[name="ids[]"]'),ids='';
    var flag = false;
    $ids.each(function(index,ele){
      if($(ele).prop('checked')){
        flag = true;
        ids += $(ele).val()+',';
        // return false;
      }
    });
    if(flag){
      $('input[name=q_ids]').val(ids);
    }else{
      myalert('请先选择题目',false);
      return false;
    }
  });
  $('#js-status').select2({ width:150,placeholder: "== 状态 ==", language: "zh-CN" }).val({$status|default=-2}).trigger("change");
  $('#js-dt-type').select2({ width:200,placeholder: "== 类型 ==", language: "zh-CN" }).val({$dt_type|default=0}).trigger("change");
})
</script>
{/block}